<template>
  <div class="pull-chheight wel-contailer">
    <div id="myChart" :style="{width: '500px', height: '300px', float: 'left'}"></div>
    <div id="pieChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
    <div id="hadoopChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
    <!-- <div id="serverChart" :style="{width: '500px', height: '300px',float: 'left'}"></div> -->
    <div id="applicationChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
    <div id="monitorChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: 'wel',
    data() {

    },
    computed: {

    },
    created() {

    },
    mounted() {
      this.drawLine();
      this.drawPie();
      this.hadoopChart();
      // this.serverControl();
      this.application();
      this.monitor();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ESB服务',
            x: 'center'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: ['服务注册', '服务发现', '服务商店']
          },
          yAxis: {
          },
          series: [{
            name: '数量',
            type: 'bar',
            data: [30, 40, 50],
            barWidth: '50%',
            top: 30,
            bottom: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 7, // 圆角
                // 定制显示（按顺序）
                color: function(params) {
                  var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: true, // 开启显示
                  position: 'top' // 在上方显示
                }
              }
            }
          }]
        });
      },
      drawPie() {
        const myChart = echarts.init(document.getElementById('pieChart'));

        myChart.setOption({
          title: {
            text: '服务器',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: ['Docker', 'Jenkins', '私有云服务器', 'vSphere Client']
            // selected: data.selected
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              radius: '65%',
              center: ['40%', '50%'],
              data: [
                { value: 335, name: 'Docker' },
                { value: 310, name: 'Jenkins' },
                { value: 135, name: '私有云服务器' },
                { value: 234, name: 'vSphere Client' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]

        });
      },
      // hadoop
      hadoopChart() {
        const dom = document.getElementById('hadoopChart');
        const myChart = echarts.init(dom);

        myChart.setOption({
          title: {
            text: 'Hadoop',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',

              data: [{
                'name': 'Hadoop节点',
                'children': [{
                  'name': '主节点',
                  'children': [{
                    'name': '1',
                    'value': 2105,
                    'children': []
                  },
                  {
                    'name': '2',
                    'value': 2105,
                    'children': []
                  },
                  {
                    'name': '3',
                    'value': 2105
                  }
                  ]
                },
                {
                  'name': '备用节点',
                  'children': [{
                    'name': '1',
                    'value': 2105
                  }
                  ]
                }

                ]
              }],
              top: '1%',
              left: '20%',
              bottom: '1%',
              right: '10%',
              symbolSize: 17,

              label: {
                normal: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 13
                }
              },

              leaves: {
                label: {
                  normal: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                }
              },

              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        });
      },
      serverControl() {
        const dom = document.getElementById('serverChart');
        const myChart = echarts.init(dom);

        myChart.setOption({
          title: {
            text: '微服务',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',

              data: [{
                'name': '注册中心',
                'children': [{
                  'name': '认证中心'
                },
                {
                  'name': '配置中心'
                },
                {
                  'name': '网关'
                },
                {
                  'name': '系统管理服务'
                }
                ]
              }],
              top: '1%',
              left: '20%',
              bottom: '1%',
              right: '25%',
              symbolSize: 17,

              label: {
                normal: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 13
                }
              },

              leaves: {
                label: {
                  normal: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                }
              },

              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        });
      },
      application() {
        const dom = document.getElementById('applicationChart');
        const myChart = echarts.init(dom);

        myChart.setOption({
          title: {
            text: '微服务应用',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',

              data: [{
                'name': '应用',
                'children': [{
                  'name': '云人脸识别'
                },
                {
                  'name': '黔西南风险感知平台'
                },
                {
                  'name': '花果园信息展示大屏'
                }
                ]
              }],
              top: '20%',
              left: '10%',
              bottom: '15%',
              right: '10%',
              symbolSize: 17,
              symbol: 'emptyCircle',

              orient: 'vertical',

              expandAndCollapse: true,

              label: {
                normal: {
                  position: 'top',
                  rotate: 0,
                  verticalAlign: 'middle',
                  align: 'center',
                  fontSize: 13
                }
              },

              leaves: {
                label: {
                  normal: {
                    position: 'bottom',
                    rotate: -0,
                    verticalAlign: 'middle',
                    align: 'center'
                  }
                }
              },

              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        });
      },
      monitor() {
        const dom = document.getElementById('monitorChart');
        const myChart = echarts.init(dom);

        myChart.setOption({
          title: {
            text: '应用监控',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',

              data: [{
                'name': '监控',
                'children': [{
                  'name': 'Hadoop监控'
                },
                {
                  'name': 'YARN监控'
                },
                {
                  'name': 'SPARKR监控'
                },
                {
                  'name': 'HBASE监控'
                },
                {
                  'name': 'mysql集群管理'
                },
                {
                  'name': 'rabbitMQ监控'
                }
                ]
              }],
              top: '1%',
              left: '20%',
              bottom: '1%',
              right: '20%',
              symbolSize: 17,

              label: {
                normal: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 12
                }
              },

              leaves: {
                label: {
                  normal: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                }
              },

              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        });
      }

    }
  };
</script>

<style scoped="scoped" lang="scss">
</style>